<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>vue构建简单页面</title>
        <!-- 引入bootstarap 的css样式 -->
        <link rel="stylesheet" href="bootvue/css/bootstrap.css">
    </head>
    <body>
        <div id="app">
            <div class="container">
                <div class="row" style="margin-top: 70px;">
                    <div class="col-md-10 col-md-offset-1">
                        <ul class="nav nav-pills nav-justified">
                            <li role="presentation"
                                v-bind:class="showActive=='home' ? 'active':''"><a href="#/home"
                                                                                   @click="changeActive('home')">首页
                            </a></li>
                            <li role="presentation"
                                :class="showActive=='teacher' ? 'active':''"><a href="#/teacher"
                                                                                @click="changeActive('teacher')">教师管理</a>
                            </li>
                            <li role="presentation"
                                :class="showActive=='student' ? 'active':''"><a href="#/student"
                                                                                @click="changeActive('student')">学生管理</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <!-- 显示路由组件的内容 -->
                    <router-view></router-view>
                </div>
            </div>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="bootvue/js/vue-router.js"></script>
        <template id="home">
            <div>
                <div class="jumbotron" style="margin-top: 30px;">
                    <p>Hello World! Hello World! Hello World! Hello World! Hello World!</p>
                </div>
            </div>
        </template>

        <template id="teacher">
            <div>
                <table class="table table-striped">
                    <tr>
                        <th>id</th>
                        <th>教师姓名</th>
                        <th>年龄</th>
                        <th>教师学历</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="t in teachers">
                        <td>{{t.id}}</td>
                        <td>{{t.name}}</td>
                        <td>{{t.age}}</td>
                        <td>{{t.grade}}</td>
                        <td><a href="" class="btn btn-success">添加</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href=""
                                                                                                class="btn btn-danger">删除
                        </a></td>
                    </tr>
                </table>
            </div>
        </template>

        <template id="student">
            <div>
                <table class="table table-striped">
                    <tr>
                        <th>id</th>
                        <th>学生姓名</th>
                        <th>年龄</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="s in students">
                        <td>{{s.id}}</td>
                        <td>{{s.name}}</td>
                        <td>{{s.age}}</td>
                        <td>{{s.email}}</td>
                        <td><a href="" class="btn btn-success">添加</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href=""
                                                                                                class="btn btn-danger">删除
                        </a></td>
                    </tr>
                </table>
            </div>
        </template>

        <script>
            // 1. 主页组件
            const home = {
                template: '#home'
            };
            // 2.教师管理组件
            const teacher = {
                template: '#teacher',
                // 数据
                data() {
                    return {
                        teachers: []
                    }
                },
                methods: {},
                // 初始化的时候就去查询
                created() {
                    let _this = this;
                    axios.get('http://localhost:8988/bootvue/teacher/all').then(function (resp) {
                        // console.log(resp.data)
                        _this.teachers = resp.data;
                    }).catch(function (err) {
                        console.log(err)
                    })
                }
            };
            // 3.学生管理组件
            const student = {
                template: '#student',
                // 定义数据
                data() {
                    return {
                        students: []
                    }
                },
                // 初始化的时候就去查询
                created() {
                    let _this = this;
                    axios.get('http://localhost:8988/bootvue/student/all').then(function (resp) {
                        console.log(resp.data)
                        _this.students = resp.data;
                    }).catch(function (err) {
                        console.log(err)
                    })
                }
            };
            // 使用路由
            let vueRouter = new VueRouter({
                routes: [
                    // 默认路由的重定向
                    {path: '/', redirect: '/home'},
                    {path: '/home', component: home},
                    {path: '/teacher', component: teacher},
                    {path: '/student', component: student}
                ]
            });

            let vm = new Vue({
                el: '#app',
                data: {
                    msg: "hello",
                    // 用来控制active
                    showActive: "home"
                },
                methods: {
                    changeActive(value) {
                        this.showActive = value;
                    }
                },
                // 注册路由
                router: vueRouter
            });
        </script>
    </body>
</html>